<template>
  <div class="project-main">
    <div class="content">
      <div class="header">
        <span class="title">
          {{ status == "edit" ? listByEdit[type] : listByLook[type] }}
        </span>
        <span class="back" @click="$router.go(-1)">返回</span>
      </div>
      <div class="tips" v-if="status == 'look'">
        <div class="title-info">
          基础信息
        </div>
        <p v-if="type == 6">
          <span>项目名称：{{ form1.project_name }}</span>
          <span>发起人：{{ form1.file_people }}</span>
          <span>督办类型：{{ form1.Supervise_type }}</span>
          <br />
          <span>
            接收人：{{
              form1.receive_people
                .split("/")
                [form1.receive_people.split("/").length - 1].split("-")[0]
            }}
          </span>
          <span>接收时间：{{ form1.edit_time }}</span>
          <span>完成节点时间：{{ form1.finish_time }}</span>
        </p>
        <p v-if="type == 7">
          <span>项目名称：{{ form2.project_name }}</span>
          <span>
            接收人：{{
              form2.receive_people
                .split("/")
                [form2.receive_people.split("/").length - 1].split("-")[0]
            }}</span
          >
          <span>填报时间：{{ form2.edit_time }}</span>
        </p>
      </div>
      <el-form
        ref="form"
        :model="form1"
        label-position="top"
        v-if="type == 6 && status == 'edit'"
      >
        <el-form-item label="项目名称">
          <el-input
            type="text"
            v-model="projectName"
            placeholder="请输入"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="接收人">
          <el-cascader
            v-model="form1.receive_people"
            :options="options_recipient"
            :props="{
              value: 'value',
              label: 'label',
            }"
            :disabled="status == 'look'"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="节点完成时间">
          <el-date-picker
            v-model="form1.finish_time"
            value-format="yyyy-MM-dd"
            type="date"
            align="right"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="督办类型">
          <el-select v-model="form1.Supervise_type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="files" v-if="status != 'look'">
          <p class="label-name">附件1上传：</p>
          <el-upload
            class="upload-demo"
            action=""
            ref="upload1"
            accept=".docx,.pdf"
            :before-upload="beforeUpload"
            :http-request="uploadFile1"
            :on-remove="handleRemove1"
            :auto-upload="false"
            :file-list="fileList1"
            :limit="1"
            :show-file-list="false"
            :on-change="changeFile1"
          >
            <el-button size="small" type="primary">
              <img src="~@img/project/icon-add.png" alt="" />点击上传
            </el-button>
            <div slot="tip" class="el-upload__tip">
              （上传文件的类型 docx、pdf）
            </div>
          </el-upload>
          <div class="placeholder-height">
            <div
              v-for="item of changeFileList1"
              :key="item.name"
              class="file-list"
            >
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'xls' ||
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'xlsx'
                "
                src="~@img/upload/icon-excel.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] == 'pdf'
                "
                src="~@img/upload/icon-pdf.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'docx'
                "
                src="~@img/upload/icon-word.png"
                alt=""
              />

              <img src="" alt="" />
              <span class="name">{{ item.name }}</span>
              <span @click="lookFile(item)" class="img111">
                <img src="~@img/upload/icon-eye.png" alt="" />
                <span class="s">预览</span>
              </span>
              <span @click="delFile1(item.uid)" class="img222">
                <img src="~@img/upload/icon-delete.png" alt="" />
                <span class="d">删除</span>
              </span>
            </div>
          </div>
        </div>

        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <el-form
        ref="form"
        :model="form2"
        label-position="top"
        v-if="(type == 7) & (status == 'edit')"
      >
        <el-form-item label="项目名称">
          <el-input
            type="text"
            v-model="projectName"
            placeholder="请输入"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="上报接收人">
          <el-cascader
            v-model="form2.receive_people"
            :options="options_recipient"
            :props="{
              value: 'value',
              label: 'label',
            }"
            :disabled="status == 'look'"
          ></el-cascader>
        </el-form-item>

        <div class="files" v-if="status != 'look'">
          <p class="label-name">附件1上传：</p>
          <el-upload
            class="upload-demo"
            action=""
            ref="upload2"
            accept=".docx,.pdf"
            :before-upload="beforeUpload"
            :http-request="uploadFile2"
            :on-remove="handleRemove2"
            :auto-upload="false"
            :file-list="fileList2"
            :limit="1"
            :show-file-list="false"
            :on-change="changeFile2"
          >
            <el-button size="small" type="primary">
              <img src="~@img/project/icon-add.png" alt="" />点击上传
            </el-button>
            <div slot="tip" class="el-upload__tip">
              （上传文件的类型 docx、pdf）
            </div>
          </el-upload>
          <div class="placeholder-height">
            <div
              v-for="item of changeFileList2"
              :key="item.name"
              class="file-list"
            >
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'xls' ||
                    item.name.split('.')[item.name.split('.').length - 1] ==
                      'xlsx'
                "
                src="~@img/upload/icon-excel.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] == 'pdf'
                "
                src="~@img/upload/icon-pdf.png"
                alt=""
              />
              <img
                v-if="
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'docx'
                "
                src="~@img/upload/icon-word.png"
                alt=""
              />

              <img src="" alt="" />
              <span class="name">{{ item.name }}</span>
              <span @click="lookFile(item)" class="img111">
                <img src="~@img/upload/icon-eye.png" alt="" />
                <span class="s">预览</span>
              </span>
              <span @click="delFile2(item.uid)" class="img222">
                <img src="~@img/upload/icon-delete.png" alt="" />
                <span class="d">删除</span>
              </span>
            </div>
          </div>
        </div>

        <el-form-item v-if="status != 'look'">
          <el-button @click="save">提 交</el-button>
        </el-form-item>
      </el-form>
      <div class="pdf-box" v-if="status == 'look'">
        <div class="pdf-title">附件1</div>
        <div :class="['pdf', isFull ? 'isAll' : '']">
          <div v-if="!isFull" class="full" @click="isFull = true">全屏</div>
          <div v-if="isFull" class="exit" @click="isFull = false">
            退出全屏
          </div>
          <!--  :src="info.file" -->
          <!-- <iframe
            ref="ifRame"
            style="margin-top:30px;"
            :src="
              'https://view.officeapps.live.com/op/view.aspx?src=' +
                form1.url || form2.url
            "
            frameborder="0"
          ></iframe> -->
          <iframe
            ref="ifRame"
            style="margin-top:30px;"
            :src="form1.url || form2.url"
            frameborder="0"
          ></iframe>
        </div>
      </div>
    </div>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">关 闭</div>
      <iframe v-if="showFileBySrc" :src="fileSrc" frameborder="0"></iframe>
      <div v-else ref="word" class="word"></div>
    </div>
  </div>
</template>
<script>
let docx = require("docx-preview");
import {
  EditSuperviseNotice,
  EditInspectionReport,
  GetLogDetail,
} from "@/api/project/log";
import { RoleDownBox } from "@api/project/detail";

export default {
  data() {
    return {
      openFile: false,
      fileSrc: "",
      showFileBySrc: "",
      changeFileList1: [],
      changeFileList2: [],
      isFull: false,
      projectName: "碳机电容及储能装置研发制造示范基地项目",
      id: "",
      type: "",
      status: "",
      ReportRecipient: "",
      options_recipient: [],

      form2: {
        receive_people: "",
      },
      form1: {
        receive_people: "",
        finish_time: null,
        Supervise_type: "",
      },
      listByEdit: [
        "日报更新",
        "周调度报告填写",
        "月通报填写",
        "季观摩填写",
        "半年晾晒填写",
        "年度总结填写",
        "督办通知单填写",
        "专项督查报告填写",
      ],
      listByLook: [
        "日报查看",
        "周调度报告查看",
        "月通报查看",
        "季观摩查看",
        "半年晾晒查看",
        "年度总结查看",
        "督办通知单查看",
        "专项督查报告查看",
      ],

      time: "",
      options: [
        {
          value: "资料报送超过规定时限1日以上",
          label: "资料报送超过规定时限1日以上",
        },
        {
          value: "项目化档案资料不健全",
          label: "项目化档案资料不健全",
        },
        {
          value: "项目进展情况不属实或相关资料不属实",
          label: "项目进展情况不属实或相关资料不属实",
        },
        {
          value: "项目未按序时进度",
          label: "项目未按序时进度",
        },
        {
          value: "其它原因",
          label: "其它原因",
        },
      ],
      info: {
        file: "",
      },
      fileList1: [],
      fileList2: [],
      token: "",
    };
  },

  mounted() {
    let { type, id, status } = { ...this.$route.params };
    this.projectName = this.$route.query.name || "";
    this.id = parseInt(id);
    this.type = parseInt(type);
    this.status = status;
    this.token = localStorage.getItem("login");
    if (this.status == "look") {
      this.GetLogDetail();
    } else {
      this.RoleDownBox();
    }
  },
  methods: {
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
    },
    async RoleDownBox() {
      // 四级下拉框
      let res = await RoleDownBox();
      console.log(res);
      if (this.type == 7) {
        this.options_recipient = res.map((item) => {
          if (item.label == "领导小组") {
            item.disabled = false;
          } else {
            item.disabled = true;
          }
          return item;
        });
      } else {
        this.options_recipient = res;
      }

      //  file_audit_people_id
    },
    beforeUpload(file, fileList) {
      this.fileName = file.name;
      const isExcel =
        file.name.split(".")[file.name.split(".").length - 1] === "pdf" ||
        file.name.split(".")[file.name.split(".").length - 1] === "docx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$message({
          message: "只能上传docx或pdf文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isExcel;
    },
    handleRemove1(file, fileList) {
      this.fileList1 = fileList;
      this.changeFileList1 = fileList;
    },
    handleRemove2(file, fileList) {
      this.fileList2 = fileList;
      this.changeFileList2 = fileList;
    },

    changeFile1(file, fileList) {
      this.changeFileList1 = fileList;
    },
    changeFile2(file, fileList) {
      this.changeFileList2 = fileList;
    },
    lookFile(item) {
      console.log(item);
      if (item.name.includes("pdf")) {
        this.showFileBySrc = true;
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
        console.log(this.fileSrc);
      } else {
        this.showFileBySrc = false;
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      }
    },
    delFile1(uid) {
      this.changeFileList1.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList1.splice(index, 1);
          console.log(a);
        }
      });
    },
    delFile2(uid) {
      this.changeFileList2.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList2.splice(index, 1);
          console.log(a);
        }
      });
    },
    async uploadFile1(params) {
      if (
        this.form1.receive_people[this.form1.receive_people.length - 1].split(
          "-"
        )[1] == undefined
      ) {
        this.$message.warning("请选择接受人，请具体到人员");
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      let fd = new FormData();
      fd.append("token", this.token);
      fd.append("project_id", this.id);
      fd.append("receive_people", this.form1.receive_people.join("/") || "");
      fd.append(
        "receive_people_id",
        this.form1.receive_people[this.form1.receive_people.length - 1].split(
          "-"
        )[1]
      );
      fd.append("finish_time", this.form1.finish_time);
      fd.append("Supervise_type", this.form1.Supervise_type);
      fd.append("file_name", params.file.name);
      fd.append("file", params.file);
      try {
        let res = await EditSuperviseNotice(fd);
        console.log(res);
        if (res.code == 0) {
          loading.close();
          this.$message.success(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
        } else {
          loading.close();
          this.$message.error(res.msg);
        }
      } catch {
        this.fileList1 = [];
        this.changeFileList1 = [];
        loading.close();
      }
    },
    async uploadFile2(params) {
      if (
        this.form2.receive_people[this.form2.receive_people.length - 1].split(
          "-"
        )[1] == undefined
      ) {
        this.$message.warning("请选择接受人，请具体到人员");
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      let fd = new FormData();
      fd.append("project_token", this.token);
      fd.append("project_id", this.id);
      fd.append("receive_people", this.form2.receive_people.join("/") || "");
      fd.append(
        "receive_people_id",
        parseInt(
          this.form2.receive_people[this.form2.receive_people.length - 1].split(
            "-"
          )[1]
        )
      );
      fd.append("file_name", params.file.name);
      fd.append("file", params.file);
      try {
        let res = await EditInspectionReport(fd);
        if (res.code == 0) {
          loading.close();
          this.$message.success(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
        } else {
          loading.close();
          this.$message.error(res.msg);
        }
      } catch {
        this.fileList2 = [];
        this.changeFileList2 = [];
        loading.close();
      }
    },
    async GetLogDetail() {
      let type = "";
      switch (this.type) {
        case 0:
          type = "日报记录";
          break;
        case 1:
          type = "周报记录";
          break;
        case 2:
          type = "月报记录";
          break;
        case 3:
          type = "季报记录";
          break;
        case 4:
          type = "半年报记录";
          break;
        case 5:
          type = "年报记录";
          break;
        case 6:
          type = "督办通知单";
          break;
        case 7:
          type = "专项督查报告";
          break;
      }
      let res = await GetLogDetail({
        log_id: this.id,
        log_type: type,
      });
      if (res.code && res.code != 0) {
        return;
      } else {
        if (type == "督办通知单") {
          // this.form1 = res;

          this.form1 = {
            ...res,
            url: res.url
              ? window.location.origin + "/#/files?url=" + res.url
              : "",
          };
        } else if (type == "专项督查报告") {
          this.form2 = {
            ...res,
            url: res.url
              ? window.location.origin + "/#/files?url=" + res.url
              : "",
          };
          // this.form2 = res;
        }
      }
    },
    save() {
      if (this.type == 6) {
        if (
          this.form1.receive_people == "" ||
          this.form1.receive_people.length == 0
        ) {
          this.$message.warning("请选择接收人！");
          return;
        }
        if (this.form1.finish_time == "") {
          this.$message.warning("请选择节点完成时间！");
          return;
        }
        if (this.form1.Supervise_type == "") {
          this.$message.warning("请选择督办类型！");
          return;
        }
        this.pushEditSuperviseNotice();
      } else if (this.type == 7) {
        if (
          this.form2.receive_people == "" ||
          this.form2.receive_people.length == 0
        ) {
          this.$message.warning("请选择接收人！");
          return;
        }

        this.pushEditInspectionReport();
      }
    },

    async pushEditSuperviseNotice() {
      this.$refs.upload1.submit();
    },
    async pushEditInspectionReport() {
      this.$refs.upload2.submit();
    },
  },
};
</script>
<style lang="less" scoped>
.project-main {
  background: #fafafa;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.content {
  padding: 0 30px;
  margin: 0 auto;
  max-width: 1500px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  overflow: hidden;
}
.header {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  span.title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
    cursor: default;
  }
  span.back {
    position: absolute;
    right: 0;
    top: 9px;
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #5889dc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
}
.tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  span {
    margin: 0 118px 0 0;
    display: inline-block;
    min-width: 300px;
  }
  span:nth-of-type(3n) {
    margin-right: 0;
  }
}
.title-info {
  margin: 20px 0;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
/deep/ .el-form {
  padding-top: 10px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
  opacity: 0.8;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-input__inner {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(204, 204, 204, 0.85);
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.flex-form {
  display: flex;
  justify-content: space-between;
  /deep/ .el-form-item {
    flex: 0 0 420px;
  }
  /deep/ .el-textarea__inner {
    height: 120px;
  }
}
/deep/ .el-textarea__inner {
  resize: none;
  height: 90px;
  border: 1px solid rgba(204, 204, 204, 0.85);
}

/deep/ .el-button {
  display: block;
  // margin: 40px auto 0;
  padding: 0;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #446db3;
  border-radius: 8px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}
.w-960 {
  width: 930px;
}
.files {
  flex: 1;
  margin-top: 20px;
  .label-name {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  /deep/.el-upload__tip {
    margin-left: 16px;
    display: inline-block;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  .upload-demo {
    min-height: 70px;
  }
  /deep/ .el-button {
    margin-top: 20px;
  }
  /deep/ .el-button--small {
    padding: 0;
    width: 133px;
    height: 38px;
    line-height: 38px;
    background: #5889dc;
    border-radius: 4px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    vertical-align: middle;
    img {
      margin-right: 5px;
      position: relative;
      left: 0;
      top: 1px;
    }
  }
}
/deep/ .el-input__inner {
  width: 420px;
}
/deep/ .el-icon-arrow-up:before {
  content: "";
  margin-top: -2px;
  display: inline-block;
  width: 14px;
  height: 8px;
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .el-input__suffix-inner {
  margin-top: -2px;
}
/deep/ .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}

/deep/ .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
.pdf-box {
  height: 580px;
  flex: 0 0 49%;
  .pdf-title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    height: 60px;
    line-height: 60px;
  }
}
.pdf {
  position: relative;
  width: 100%;
  height: calc(100% - 60px);
  z-index: 999;
  iframe {
    margin-top: 0 !important;
    width: 100%;
    height: 100%;
  }
  .full {
    position: absolute;
    top: 70px;
    right: 150px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    cursor: pointer;
  }
  .exit {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    border-radius: 10px;
    cursor: pointer;
  }
}
.isAll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.placeholder-height {
  min-height: 70px;
}
.file-list {
  height: 60px;
  line-height: 60px;
  cursor: default;
  span,
  img {
    vertical-align: middle;
  }
  span {
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 80px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .pdf {
    height: 430px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .pdf {
    height: 490px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .pdf {
    height: 600px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .pdf {
    height: 370px;
  }
  .tips {
    font-size: 12px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .pdf {
    height: 330px;
  }
}
</style>
